<template>
  <van-skeleton title :row="15" :loading="loading">
    <div class="blackOrWhite detailBox">
      <div class="headerBox">
        <img class="HeaderImg" :src="detailObj.image" alt />
        <p class="headerTit">{{detailObj.title}}</p>
      </div>
      <div v-html="detailObj.body"></div>
      <div style="height:.5rem;"></div>
      <ul class="Detailfooter">
        <li @click="routeOut">
          <i class="iconfont icon-fanhui noClick"></i>
        </li>
        <li @click="reoutGoComment">
          <i class="iconfont icon-duanxin noClick"></i>
          <span>{{otherObj.comments }}</span>
        </li>
        <li @click="giveALlikeOrEnshrine(1)" >
          <i v-if="!isFabulous" class="iconfont icon-zanpress noClick"></i>
          <i v-else style="color:#4395ff;" class="iconfont icon-dianzan1 noClick"></i>
          <span>{{otherObj.popularity }}</span>
        </li>
        <li @click="giveALlikeOrEnshrine(2)">
          <i v-if="!isCollection" class="iconfont icon-unstarred noClick"></i>
          <i v-else style="color:#4395ff;" class="iconfont icon-star-opp noClick"></i>
        </li>
        <li @click="showShare = true">
          <i class="iconfont icon-daochu noClick"></i>
        </li>
      </ul>
      <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
  </van-skeleton>
</template>

<style lang="scss">
.headline {
  height: 0px;
}
</style>


<style lang="scss" scoped>
.detailBox {
  width: 100%;
  height: 100%;
}
.headerBox {
  position: relative;
  .headerTit {
    position: absolute;
    // background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    padding: 0.4rem 0 0.2rem 0.1rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.18rem;
  }
}
.HeaderImg {
  width: 100%;
}
.Detailfooter {
  height: 0.5rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eee;
  display: flex;
  li {
    margin: 0.05rem 0;
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 0.12rem;
      margin-left: 0.03rem;
      align-self: flex-start;
    }
  }
  .yesClass * {
    color: #4395ff !important;
  }
  li:nth-child(1) {
    margin: 0.08rem 0;
    flex: 1.1;
    border-right: 0.01rem solid #ccc;
  }
  .noClick {
    font-size: 0.28rem;
    // color: #333;
  }
}
</style>

<script>
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import { getDetailObj, getDetailother } from "@/util/detailAjax.js";
export default {
  name: "Detail",
  data: function() {
    return {
      isgetdetail: true,
      id: "",
      detailObj: "", //详情
      otherObj: "", //点赞数对象
      isFabulous: false, //点赞
      isCollection: false, //收藏
      showShare: false,
      loading: true,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" }
      ]
    };
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      if (from.name == "comment") {
        vm.isgetdetail = false;
      }
    });
  },
  created() {
    this.getDeatil();
    this.getDetailotherFn();
  },
  destroyed() {
    let DomLink = document.getElementById("detailLink");
    DomLink.setAttribute("href", "");
  },
  computed: {
    ...mapState("login", ["islogin"])
  },
  methods: {
    getDeatil() {
      let that = this;
      that.id = that.$route.params.id;
      getDetailObj(that.id).then(res => {
        that.$nextTick(() => {
          that.detailObj = res;
          let DomLink = document.getElementById("detailLink");
          DomLink.setAttribute("href", this.detailObj.css[0]);
          document.documentElement.scrollTop = 0;
          setTimeout(() => {
            that.loading = false;
          }, 100);
        });
      });
    },
    getDetailotherFn() {
      let that = this;
      getDetailother(that.id).then(res => {
        // console.log(res);
        that.otherObj = res;
      });
    },
    routeOut() {
      this.$router.go(-1);
    },
    reoutGoComment() {
      this.$router.push("/comment/" + this.id);
    },
    //点赞和收藏
    giveALlikeOrEnshrine(num) {
      console.log(num);
      let that = this;
      if (num == 1) {
        if (that.isFabulous == true) {
          that.isFabulous = false;
          that.otherObj.popularity--;
        } else {
          that.isFabulous = true;
          that.otherObj.popularity++;
        }
      } else {
        if (that.isCollection == true) {
          that.isCollection = false;
        } else {
          that.isCollection = true;
        }
      }
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    }
  }
};
</script>